<template>
  <div class="payment-config-relation">
    <el-card>
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-form :model="searchForm" inline>
          <el-form-item label="参数">
            <el-input
              v-model="searchForm.parameter"
              placeholder="请输入参数"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              搜索
            </el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <el-table :data="tableData" v-loading="loading" stripe>
        <el-table-column prop="paymentID" label="支付ID" width="120" />
        <el-table-column prop="userID" label="用户ID" min-width="150" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-area">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getPaymentConfigRelation } from "@/api/system";
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";

// 搜索表单
const searchForm = reactive({
  parameter: "",
});

// 表格数据
const tableData = ref<any[]>([]);
const loading = ref(false);

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0,
});

// 加载数据
const loadData = async () => {
  try {
    loading.value = true;
    const params = {
      parameter: searchForm.parameter || "",
    };
    
    const res: any = await getPaymentConfigRelation(params);
    if (res && res.data) {
      tableData.value = Array.isArray(res.data) ? res.data : [];
      pagination.total = tableData.value.length;
    } else {
      tableData.value = [];
      pagination.total = 0;
    }
  } catch (error) {
    console.error("加载数据失败:", error);
    ElMessage.error("加载数据失败");
    tableData.value = [];
    pagination.total = 0;
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  pagination.page = 1;
  loadData();
};

// 重置
const handleReset = () => {
  searchForm.parameter = "";
  pagination.page = 1;
  loadData();
};

// 分页大小变化
const handleSizeChange = (size: number) => {
  pagination.size = size;
  pagination.page = 1;
  loadData();
};

// 当前页变化
const handleCurrentChange = (page: number) => {
  pagination.page = page;
  loadData();
};

// 初始化
onMounted(() => {
  loadData();
});
</script>

<style scoped>
.payment-config-relation {
  padding: 20px;
}

.search-area {
  margin-bottom: 20px;
}

.pagination-area {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
